<template>
    <div class="">
        
        <el-row style="padding-top: 10px" v-loading="loading">
            
            <el-col :span="24" style="padding:0 5px">
                <el-card>
                    <div class="title">
                        诉求

                        <div class="orientation" v-if="newShow">
                            <ul>
                                <li class="green">
                                    <p><i>1</i>开始</p>
                                </li>
                                <em class="iconfont">&#xe687;</em>
                                <li :class="topProcess >= 1 ? 'green' : '' ">
                                    <p><i>2</i>已移交</p>
                                </li>
                                <em class="iconfont">&#xe687;</em>
                                <li :class="topProcess >= 3 ? 'green' : '' ">
                                    <p><i>3</i>已受理</p>
                                </li>
                                <em class="iconfont">&#xe687;</em>

                                <li :class="topProcess >= 4 ? 'green' : '' ">
                                    <p><i>4</i>已办结</p>
                                </li>

                                <em class="iconfont">&#xe687;</em>
                                <li :class="topProcess == 7 ? 'green' : '' ">
                                    <p><i>5</i>已评价</p>
                                </li>

                                <li style="margin-left:10px;" v-if="porcessStatus ==4" :class="porcessStatus ==4 ? 'red' : '' ">
                                    <p><i style="border:none;background:none;font-size:17px;line-height:initial;" class="iconfont">&#xe637;</i>已超时
                                    </p>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <div class="table context">
                        <table>
                            <tr>
                                <td style="width:120px;">诉求编号</td>
                                <td colspan="3">{{question_num}}</td>
                                <td>诉求日期</td>
                                <td colspan="3">{{addtime}}</td>
                            </tr>
                            <tr>
                                <td>企业名称</td>
                                <td colspan="3">{{company}}</td>
                                <td style="width:120px;">公司地址</td>
                                <td colspan="3">{{areaName}}{{villagesName}}{{address}}</td>
                            </tr>
                            <tr>
                                <td>来源</td>
                                <td>
                                    <span v-if="from == 0">{{originArr[0].name}}</span>
                                    <span v-if="from == 1">{{originArr[1].name}}</span>
                                    <span v-if="from == 2">{{originArr[2].name}}</span>
                                    <span v-if="from == 3">{{originArr[3].name}}</span>
                                    <span v-if="from == 4">{{originArr[4].name}}</span>
                                    <span v-if="from == 5">{{originArr[5].name}}</span>
                                    <span v-if="from == 7">{{originArr[6].name}}</span>
                                </td>
                                <td style="width:100px;">诉求类型</td>
                                <td>{{qtitle}}</td>
                                <td style="width:100px;">联系人</td>
                                <td>{{user}}</td>
                                <td style="width:100px;">联系电话</td>
                                <td>{{phone}}<span v-if="tel">&nbsp;&nbsp;座机：{{tel}}</span></td>
                            </tr>
                            <tr>
                                <td>诉求内容</td>
                                <td colspan="7">
                                    <div class="conp context">
                                        <p v-html="content"></p>

                                    </div>
                                </td>
                            </tr>
                            <tr v-if="supplement && newShow">
                                <td>补充内容</td>
                                <td colspan="7">
                                    <p v-html="supplement"></p>
                                </td>
                            </tr>
                            <tr v-if="fileList.length>0">
                                <td>附件</td>
                                <td colspan="7">
                                    <ul>

                                        <li v-for="(list,index) in fileList" :key="index">
                                            <a :href="httpHome+list.url" target="_blank">{{list.name}}</a>
                                        </li>

                                    </ul>
                                </td>
                            </tr>
                        </table>
                        <el-col :span="24" style="padding-bottom:15px;text-align:right;">
                            <el-button size="small" v-if="uType == 1 && intoType !=4"  class="marbtn" @click="seeOldData" style="width:min-content;" type="primary">原始诉求
                            </el-button>
                            <el-button size="small" v-if="uType == 1 && intoType ==4"  class="marbtn" @click="$router.go(-1)" style="width:min-content;" type="primary">标准化诉求
                            </el-button>
                        </el-col>
                    </div>

                    <div class="context" v-if="intoType!=3">

                        <!-- <el-button round size="small" class="marbtn" @click="answerLayer" v-if="uType == 2">解答</el-button> -->
                        <el-button size="small" type="primary" class="marbtn" v-if="uType == 2" @click="printText()">
                            诉求打印
                        </el-button>
                        <a id="out" v-if="uType == 2" href="" download="" @click="outFile">导出</a>
                    </div>
                </el-card>
                <!-- <el-card style="margin-top:50px;">
          <div class="title">解答<span class="time">2012-12-12</span></div>
          <div class="context">
            <p>00000</p>
            <el-button round size="mini" class="marbtn">提交</el-button>
          </div>


        </el-card> -->
                <el-card style="margin-top:25px;"  v-if="newShow">
                    <div class="title">
                        受理部门：{{target}}
                        <div class="rig" v-if="porcessStatus == 1 && !timeover">
                            <i class="iconfont icon-tongzhi warn"></i>请在<em>{{endTime}}</em>前进行受理
                        </div>
                        <div class="rig" v-if="timeover && porcessStatus != 5">
                            <i class="iconfont icon-shijian  red"></i>已超时<em class="red">{{day}}天{{hour}}时{{minite}}分{{second}}秒</em>请尽快处理
                        </div>
                        <div class="rig" v-if="porcessStatus == 2 && !timeover">
                            <i class="iconfont icon-tongzhi warn"></i>已超时，请在<em>{{final_time}}</em>前进行问题办结
                        </div>
                        <div class="rig green" v-if="porcessStatus == 5">
                            <i class="iconfont icon-zhengque green"></i>已办结
                        </div>
                    </div>
                    <div class="step context" >
                        <div class="el-steps el-steps--vertical">
                            <div v-for="(item,index) in progress" class="el-step is-vertical" :key="index">
                                <div class="el-step__head is-process">
                                    <div class="el-step__line" style="margin-right: 0px;"><i class="el-step__line-inner" style="transition-delay: -150ms; border-width: 0px; height: 0%;"></i>
                                    </div>
                                    <div class="el-step__icon is-text">
                                        <!---->
                                        <div class="el-step__icon-inner"></div>
                                    </div>
                                </div>
                                <div class="el-step__main" style="margin-bottom:10px;">
                                    <div class="el-step__title is-process"><span v-if="item.aname">{{item.aname}}</span><span v-else-if="item.type == 0 || item.aname == 'null'">用户追问</span><span v-if="item.type == 5 || item.aname == 'null'">用户评价</span></div>

                                    <div class="el-step__description is-process">
                                        <h4>

                                            <em v-if="item.type == 1" class="warn"><i class="iconfont icon-zhengque warn"></i>已流转</em>
                                            <em v-else-if="item.type == 2" class="blue"><i class="iconfont icon-zhengque blue"></i>受理中</em>
                                            <em v-else-if="item.type == 3" class="blue"><i class="iconfont icon-zhengque blue"></i>督办</em>
                                            <em v-else-if="item.type == 0" class="red"><i class="iconfont icon-zhengque red"></i>追问</em>
                                            <em v-else-if="item.type == 4" class="green"><i class="iconfont icon-zhengque green"></i>已办结</em>
                                            <em v-if="item.type == 0" class="red" @click="qAnswer(item.id)" style="padding-left:30px;cursor: pointer;">解答</em>
                                            <span>{{item.addtime}}</span></h4>
                                        <p v-html="item.content"></p>
                                        <div v-if="item.children.length>0">
                                            <hr style="border: 1px solid #E8E7E7;margin:5px 0;">
                                            <span v-for="(list,index) in item.children" :key="index" style="display:block;">
                                                {{list.answername}} : {{list.answer}}
                                            </span>
                                        </div>
                                        <div>
                                            <!-- <hr style="border: 1px solid #E8E7E7;margin:5px 0;"> -->
                                            <ul v-if="item.sup_attach.length>0">
                                                <h3 style="font-size:14px;">附件</h3>
                                                <li v-for="(list,index) in item.sup_attach" :key="index">
                                                    <a :href="httpHome+list.url" target="_blank" :download="list.name">{{list.name}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="botbtnfixed" v-if="uType !=2&&intoType!=3">
                        <el-button size="small" v-if="uType == 3" class="marbtn" @click="dubanFn" style="width:min-content;" type="primary">督办
                        </el-button>
                        
                        <el-button size="small" v-if="uType == 3" class="marbtn" @click="goBackTo" style="width:min-content;" type="primary">退回
                        </el-button>
                        <el-button size="small" v-if="uType == 1" class="marbtn" @click="Transfer" style="width:min-content;" type="primary">移交
                        </el-button>
                        <el-button size="small" v-if="uType == 1 && topProcess==null  " class="marbtn" @click="EditFn" style="width:min-content;" type="primary">编辑
                        </el-button>
                        <el-button size="small" v-if="uType == 3 && proofread ==0" class="marbtn" @click="checkFn" style="width:min-content;" type="primary">核准
                        </el-button>
                        <el-button size="small" v-if="uType == 3 && proofread ==1" class="marbtn" @click="reCheckFn" style="width:min-content;" type="primary">再次核准
                        </el-button>
                        <el-button size="small" v-if="uType == 3" class="marbtn" @click="Conclude" style="width:min-content;" type="primary">办结
                        </el-button>

                        <el-button size="small" v-if="uType == 1" class="marbtn" @click="doneFn" style="width:min-content;" type="primary">受理
                        </el-button>
                        <el-button size="small" v-if="uType == 1 && intoType == 1" class="marbtn" @click="delList" style="width:min-content;" type="danger">删除
                        </el-button>
                        <!-- 运营人员评价按钮 -->
                        <el-button size="small" v-if="uType == 1 && intoType == 2"  class="marbtn" @click="pingjiaFn" style="width:min-content;" type="primary">评价
                        </el-button>

                        
                        <el-button size="small" class="marbtn" @click="$router.go(-1)" style="width:min-content;" type="warning">
                            返回
                        </el-button>
                        

                    </div>
                    <div class="botbtnfixed" v-if="uType ==2&&intoType!=3">
                        
                        <el-button size="small" class="marbtn" @click="shouliFn" style="width:min-content;" type="primary">受理
                        </el-button>
                        <el-button size="small" class="marbtn" style="width:min-content;" @click="doneOver" type="primary">办结
                        </el-button>

                        <el-button size="small" class="marbtn" @click="shensuFn" style="width:min-content;" type="primary">申诉
                        </el-button>
                        <el-button size="small" class="marbtn" @click="$router.go(-1)" style="width:min-content;" type="warning">
                            返回
                        </el-button>

                    </div>

                </el-card>

            </el-col>

        </el-row>
        <!-- 通用附件+内容上传 -->
        <el-dialog :title="dialogTit" :visible.sync="dialogVisible" :before-close="closeDialog" width="40%" v-loading="Dialoloading">
            <el-form ref="form" label-width="120px">

                <el-form-item label="是否联系企业" v-if="tieUp">
                    <el-radio-group v-model="lianxi">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="企业是否满意" v-if="tieUp">
                    <el-radio-group v-model="manyi">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="满意度" v-if="pjIsShow">
                    <el-radio-group v-model="user_confirm">
                        <el-radio :label="2">已解决</el-radio>
                        <el-radio :label="1">未解决</el-radio>
                    </el-radio-group>
                </el-form-item>
                
                <el-form-item :label="dialogCon">
                    <el-input type="textarea" rows="5" v-model="answer" :placeholder="placeholder"></el-input>
                </el-form-item>
                <el-form-item label="附件" v-if="uploadFile">
                    <el-upload class="upload-demo" :action="httpHome+'direct/Massage/uploadFile'" :on-success="fileSuccess" :before-remove="handlemove" :file-list="fileList3">
                        <el-button size="small" type="primary">上传附件</el-button>
                        <div slot="tip" class="el-upload__tip">支持文档、图片、压缩包等类型文件上传</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <!-- <el-button v-if="print" size="small" type="primary">打印</el-button> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="pjIsShow = false;dialogVisible = false;tieUp = false;Dialoloading = false;placeholder ='';dialogTit='';dialogCon=''" size='mini'>取 消</el-button>
                <el-button type="primary" @click="dialogDone" size='mini'>确 定</el-button>
            </span>
        </el-dialog>
        <!-- 移交或者核准弹窗 -->
        <el-dialog :title="moveTitle" :visible.sync="dialogVisibleMove" width="40%" v-loading="Dialoloading">
            <el-form style="width:100%; margin:20px;" label-width="150px" size="small">
                <el-form-item label="诉求分类">
                    <el-select v-model="movegname" placeholder="诉求分类">
                        <el-option v-for="(item,index) in MsgGroup" :label="item.name" :value="item.id" :key="index"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <select-menu :sname="sname" ref="mesage" :options="options" :dynamicValidateForm="dynamicValidateForm"></select-menu>
            <!--市级部门-->
            <select-menu :sname="sname2" ref="mesage2" :options="optionsArea" :dynamicValidateForm="dynamicValidateFormArea"></select-menu>
            <!--县长热线-->
            <over-time ref="over" :times="overtime"></over-time>
            <el-form style="width:100%; margin:0px;" label-width="170px" size="small">
                <el-form-item :label="dialogCon" v-if="checkShow">
                    <el-input type="textarea" rows="5" v-model="answer"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleMove = false;Dialoloading = false;" size="mini">取 消</el-button>
                <el-button v-if="!isHide" type="primary" @click="dialogMove" size="mini">移 交</el-button>
                <el-button v-if="isHide" type="primary" @click="dialogCheck" size="mini">核 准</el-button>
            </span>
        </el-dialog>

        <!-- 通用信息弹窗 -->
        <el-dialog :title="alertTit" :visible.sync="dialogInfoVisible" width="40%">
            <span>{{infoCon}}</span>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogInfoVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitInfoDialog()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import actionurl from "@/assets/js/actionurl";
import config from "@/config.js";
import selectMenu from "@/components/selectMenu.vue";
import overTime from "@/components/overTime.vue";

export default {
    components: {},
    data() {
        return {
            newShow:true,
            questionNum:'',
            user_confirm:2,
            pjIsShow:false,
            placeholder: "",
            checkShow: false,
            topProcess: [],
            tel: "",
            area: "",
            areaName: "",
            villages: "",
            villagesName: "",
            areaOptions: [],
            Dialoloading: false,
            intoType: "",
            alertTit: "",
            infoCon: "",
            dialogInfoVisible: false,
            from: "",
            originArr: [
                {
                    label: "0",
                    value: "0",
                    name: "微信"
                },
                {
                    label: "1",
                    value: "1",
                    name: "热线"
                },
                {
                    label: "2",
                    value: "2",
                    name: "平台"
                },
                {
                    label: "3",
                    value: "3",
                    name: "在线客服"
                },
                {
                    label: "4",
                    value: "4",
                    name: "民营经济分析系统"
                },
                {
                    label: "5",
                    value: "5",
                    name: "面对面帮扶"
                },
                {
                    label: "7",
                    value: "7",
                    name: "线下服务"
                }
            ],
            transferMsg: "",
            target_num: "",
            timeover: false, //是否超时
            endTime: "", //处理时间
            final_time: "", //办结时间
            day: "",
            hour: "",
            minite: "",
            second: "",
            loading: true,
            tieUp: false, //办结单选显示控制
            lianxi: 1,
            manyi: 1,
            porcessStatus: "", //横轴状态
            proofread: 0, // 再次核准标识
            moveTitle: "移交",
            dialogVisibleMove: false,
            overtime: "",
            isHide: false,
            qtitle: "",
            movegname: "",
            httpHome: "",
            title: "",
            acceptDesc: "",
            ThisID: 0,
            print: false,
            dialogTit: "追问解答",
            dialogCon: "追问解答",
            content: "",
            supplement: "",
            company: "",
            phone: "",
            target: "",
            accepttime: "",
            user: "",
            addtime: "",
            address: "",
            progress: [],
            progressFirst: "",
            progressFirstTime: "",
            answer: "",
            anID: "",
            fileList: [],
            dialogVisible: false,
            uType: 0,
            question_num: 0,
            fileList3: [],
            uploadFile: false,

            MsgGroup: [],
            sname: "市级部门",
            sname2: "县长热线",
            dynamicValidateForm: {
                domains: [],
                selectList: [
                    {
                        value: "",
                        id: ""
                    }
                ]
            },
            options: [
                {
                    value: "10",
                    label: "测试部门",
                    id: "11"
                }
            ],
            dynamicValidateFormArea: {
                domains: [
                    {
                        value: "河北",
                        id: "12"
                    }
                ],
                selectList: [
                    {
                        value: "",
                        id: ""
                    }
                ]
            },
            optionsArea: [
                {
                    value: "10",
                    label: "安次区",
                    id: "11"
                }
            ]
        };
    },
    components: {
        selectMenu,
        overTime
    },
    methods: {
    
        //查看原始数据
        seeOldData(){
            this.$router.push({
                path: "/supervise/" + this.$route.params.id + "/4"
            }); 
        },
        //评价
        pingjiaFn(){
          this.dialogVisible = true;
          // this.tieUp = true;
          this.pjIsShow = true;
          this.uploadFile = false;
          this.dialogTit = '评价';
          this.dialogCon='备注';
        },
        //评价接口
        pjFnUrl(){
           var _this = this;
            actionurl.userConfirm(
            {
                questionNum: _this.questionNum,
                user_confirm:_this.user_confirm,
                remark:_this.answer
            },
            function(re) {
                _this.Dialoloading = false;
                _this.dialogVisible = false;
                _this.$message(re.msg);
                if (re.status == 1) {
                    _this.detailInfo();
                        
                }
            })
        },
        printText() {
            // 打印
            var _this = this;
            actionurl.printContent(
                {
                    id: _this.ThisID
                },
                function(re) {
                    var data = re.data;
                    if (data.transfer_msg == null) {
                        _this.transferMsg = "无";
                    } else {
                        _this.transferMsg = data.transfer_msg;
                    }

                    var mywindow = window.open(
                        "",
                        "PRINT",
                        "height=900px,width=1200px"
                    );
                    // var mywindow = window.open('', 'PRINT');
                    mywindow.document.write(
                        "<html><head><title>" + document.title + "</title>"
                    );
                    mywindow.document.write(
                        '</head><body id="printb" style="margin: 0px 50px">'
                    );
                    mywindow.document.write(
                        '<h1 style="font-size:20px;font-weight:normal;text-align:center;">诉求交办单</h1>'
                    );
                    mywindow.document.write(
                        '<div style="font-size:15px;font-weight:normal;margin: 0px 10px;height: 30px"><span style="float: left;">编号：（2018）2号</span><span style="float: right;">' +
                            "日期：" +
                            data.date +
                            "</span></div>"
                    );
                    mywindow.document.write(
                        "<style>td,th{font-size: 12px;border:1px solid #bbb;line-height: 34px;padding: 0 5px;}table{border-collapse: collapse;border-spacing: 0;width:98%;margin:0 auto;}th{background: #f00;}th{background:#f2f2f2;}@page { size:A4 portrait; }</style>"
                    );
                    mywindow.document.write("<table>");
                    mywindow.document.write(
                        '<tr><th style="width: 100px;height: 70px; font-size: 15px;">企业名称</th><td colspan="3" style="height: 70px; font-size: 15px; padding: 0 30px">' +
                            data.company +
                            "</td></tr>"
                    );
                    mywindow.document.write(
                        '<tr><th style="width: 100px;height: 70px; font-size: 15px;">联系人</th><td style="height: 70px; font-size: 15px; padding: 0 30px">' +
                            data.user +
                            '</td><th style="width: 100px;height: 70px; font-size: 15px;">联系电话</th><td style="height: 70px; font-size: 15px;padding: 0 30px">' +
                            data.phone +
                            "</td></tr>"
                    );
                    mywindow.document.write(
                        '<tr><th style="width: 100px;height: 200px; font-size: 15px;">诉求内容</th><td colspan="3" style="height: 200px; font-size: 15px; padding: 0 30px">' +
                            data.content +
                            "</td></tr>"
                    );
                    mywindow.document.write(
                        '<tr><th style="width: 100px;height: 70px; font-size: 15px;">交办单位</th><td style="height: 70px; font-size: 15px; padding: 0 30px">廊坊市民营经济领导小组办公室</td><th style="width: 100px;height: 70px; font-size: 15px;">联系电话</th><td style="height: 70px; font-size: 15px;padding: 0 30px">' +
                            2338030 +
                            "</br>" +
                            2338085 +
                            "</td></tr>"
                    );
                    mywindow.document.write(
                        '<tr><th style="width: 100px;height: 70px; font-size: 15px;">承办单位</th><td style="height: 70px; font-size: 15px; padding: 0 30px">' +
                            data.user_name +
                            '</td><th style="width: 100px;height: 70px; font-size: 15px;">联系电话</th><td style="height: 70px; font-size: 15px; padding: 0 30px">' +
                            data.user_phone +
                            "</td></tr>"
                    );
                    mywindow.document.write(
                        '<tr><th style="width: 100px;height: 120px; font-size: 15px;">备注</th><td colspan="3" style="height: 120px; font-size: 15px; padding: 0 30px">' +
                            _this.transferMsg +
                            "</td></tr>"
                    );
                    mywindow.document.write("</table>");
                    mywindow.document.write("</body></html>");
                    mywindow.document.close(); // necessary for IE >= 10
                    mywindow.focus(); // necessary for IE >= 10*/
                    mywindow.print.portrait = true;
                    // console.log(mywindow)
                    // mywindow.print.header = "This is MeadCo";
                    mywindow.print();
                    mywindow.close();
                    return true;
                }
            );
        },
        outFile() {
            // 导出
            var _this = this;
            console.log(_this.ThisID);
            $("#out").attr(
                "href",
                actionurl.baseUrl +
                    "direct/Massageadmin/derived/id/" +
                    _this.ThisID
            );
        },
        getAreaList() {
            //获取地区接口
            var _this = this;
            actionurl.getDirectArea({}, function(re) {
                _this.areaOptions = re.data.children;
                if (_this.area) {
                    var areaArr = re.data.children.filter(
                        item => item.value == _this.area
                    )[0];
                    _this.areaName = areaArr.label;
                    _this.villagesName = areaArr.children.filter(
                        item => item.value == _this.villages
                    )[0].label;
                }

                // console.log(_this.areaName,_this.villagesName);
            });
        },
        //删除此项
        delList() {
            this.dialogInfoVisible = true;
            this.alertTit = "删除";
            this.infoCon = "确认删除吗？";
        },
        //确定删除
        submitInfoDialog() {
            this.delListFnUrl();
        },
        //删除接口
        delListFnUrl() {
            //列表删除事件
            var _this = this;
            actionurl.QuserDelete(
                {
                    //删除按钮事件
                    id: _this.ThisID
                },
                function(re) {
                    if (re.status == 1) {
                        _this.dialogInfoVisible = false;
                        _this.$message(re.msg);
                        _this.$router.go(-1);
                    } else {
                        _this.$message(re.msg);
                    }
                }
            );
        },
        //弹窗关闭前
        closeDialog(done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                    this.tieUp = false;
                    this.placeholder = "";
                })
                .catch(_ => {});
        },
        concludeUrlFn() {
            var _this = this;
            actionurl.conclude(
                {
                    id: _this.ThisID,
                    lianxi: _this.lianxi,
                    manyi: _this.manyi,
                    content: _this.answer,
                    sup_attach: JSON.stringify(_this.fileList3)
                },
                function(re) {
                    _this.$message({
                        message: re.message,
                        type: "warning"
                    });
                    _this.Dialoloading = false;
                    _this.dialogVisible = false;
                    _this.$refs["form"].resetFields();
                    if (re.status == 1) {
                        _this.detailInfo();
                        _this.$message({
                            message: "处理成功",
                            type: "success"
                        });
                        _this.fileList3 = [];
                        _this.dialogVisible = false;
                    } else {
                        _this.$message({
                            message: re.message,
                            type: "warning"
                        });
                    }
                }
            );
        },
        countTime() {
            //计时效果
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截止时间
            var endDate = new Date(this.endTime); //受理截至时间
            var finalDate = new Date(this.final_time); //办结截至时间

            // console.log(endDate.getTime());
            var end = endDate.getTime();
            //时间差
            var leftTime = now - end;
            //定义变量 d,h,m,s保存倒计时的时间
            if (leftTime >= 0) {
                this.day = Math.floor(leftTime / 1000 / 60 / 60 / 24);
                this.hour = Math.floor((leftTime / 1000 / 60 / 60) % 24);
                this.minite = Math.floor((leftTime / 1000 / 60) % 60);
                this.second = Math.floor((leftTime / 1000) % 60);
            }

            if (this.porcessStatus == 1) {
                //如果是受理前
                now - endDate.getTime() > 0
                    ? (this.timeover = true)
                    : (this.timeover = false);
            }
            if (this.porcessStatus == 2) {
                //如果是办结前
                now - finalDate.getTime() > 0
                    ? (this.timeover = true)
                    : (this.timeover = false);
            }
            // console.log(this.m);
            //递归每秒调用countTime方法，显示动态时间效果
            setTimeout(this.countTime, 1000);
        },
        shouliFn() {
            // 受理弹窗
            this.dialogVisible = true;
            this.uploadFile = false;
            this.dialogTit = "企业诉求已开始受理";
            this.dialogCon = "备注";
            this.placeholder = "可输入受理方案及处理时限";
            this.print = true;
            this.answer = "";
            this.tieUp = false;
        },
        shouliFnUrl() {
            //受理接口
            var _this = this;
            actionurl.ShouLiOption(
                {
                    id: _this.ThisID,
                    content: _this.answer,
                    // sup_attach: JSON.stringify(_this.fileList3)
                },
                function(re) {
                    _this.Dialoloading = false;
                    _this.dialogVisible = false;
                    if (re.status == 1) {
                        _this.detailInfo();
                        _this.$message({
                            message: "受理成功",
                            type: "success"
                        });
                        _this.fileList3 = [];
                    } else {
                        _this.$message({
                            message: re.msg,
                            type: "warning"
                        });
                    }
                }
            );
        },
        shensuFn() {
            // 申诉弹窗
            this.dialogVisible = true;
            this.uploadFile = true;
            this.dialogTit = "申诉";
            this.dialogCon = "申诉内容";
            this.answer = "";
        },
        shensuFnUrl() {
            // 申诉接口
            var _this = this;
            actionurl.ShenSuOption(
                {
                    id: _this.ThisID,
                    remarks: _this.answer,
                    sup_attach: JSON.stringify(_this.fileList3)
                },
                function(re) {
                    _this.Dialoloading = false;
                    if (re.status == 1) {
                        _this.detailInfo();
                        _this.$message({
                            message: "申诉成功",
                            type: "success"
                        });
                        _this.fileList3 = [];
                        _this.dialogVisible = false;
                    } else {
                        console.log(re.data);
                        _this.$message({
                            message: re.message,
                            type: "warning"
                        });
                    }
                }
            );
        },
        EditFn() {
            this.$router.push({
                path: "/questionEdit/" + this.ThisID
            });
        },
        Transfer() {
            //移交按钮弹窗

            this.GetTargetList();
            this.dialogVisibleMove = true;
            this.GetMovedetailInfo();
            this.isHide = false;
        },
        GetMovedetailInfo() {
            //获取移交详情信息
            var _this = this;
            console.log(_this.ThisID);
            actionurl.MgetTransferInfo(
                {
                    //获取移交的诉求详细信息
                    id: _this.ThisID
                },
                function(re) {
                    if (re.status == 1) {
                        // console.log(re.data.city);
                        _this.dynamicValidateForm = {
                            domains: re.data.city,
                            selectList: [
                                {
                                    value: "选择",
                                    id: "0"
                                }
                            ]
                        };
                        _this.dynamicValidateFormArea = {
                            domains: re.data.county,
                            selectList: [
                                {
                                    value: "选择",
                                    id: "0"
                                }
                            ]
                        };

                        _this.movegname = re.data.group;
                        _this.overtime = re.data.final_time;
                        _this.GetMsgGroup();
                    } else {
                        _this.$message(re.msg);
                    }
                }
            );
        },
        GetTargetList() {
            //获取区县以及市级下拉菜单获取
            var _this = this;
            actionurl.targetListByType({}, function(re) {
                _this.options = re.data.city;
                _this.optionsArea = re.data.county;
            });
        },
        GetMsgGroup() {
            //获取诉求分类
            var _this = this;
            actionurl.MessageGroup(
                {
                    mesgroup: 1, //0-面对面等分类 1-八大类
                    fid: 1
                },
                function(re) {
                    console.log(re);
                    _this.MsgGroup = re.data;
                }
            );
        },
        dialogMove() {
            //移交操作接口
            this.Dialoloading = true;
            var _this = this;
            actionurl.MuserTransfer(
                {
                    //获取移交的诉求详细信息
                    id: _this.ThisID,
                    group: _this.movegname,
                    city: _this.$refs.mesage.getContent().join(","),
                    county: _this.$refs.mesage2.getContent().join(","),
                    final_time: _this.$refs.over.getContent()
                },
                function(re) {
                    _this.Dialoloading = false;
                    _this.$message(re.msg);
                    if (re.status == 1) {
                        _this.detailInfo();
                        _this.dialogVisibleMove = false;
                    } else {
                    }
                }
            );
        },
        checkFn() {
            //核准弹窗按钮
            this.moveTitle = "核准";
            this.GetTargetList();
            this.dialogVisibleMove = true;
            this.GetMovedetailInfo();
            this.isHide = true;
            this.checkShow = true;
            this.dialogCon = "受理意见";
        },
        //核准接口
        checkFnUrl() {
            if (
                this.$refs.mesage.getContent().length == 0 &&
                this.$refs.mesage2.getContent().length == 0
            ) {
                this.$message.error("请选择县长热线或者请选择市级部门");
                return;
            }
            var _this = this;
            actionurl.MyxTransfer(
                {
                    //核准接口
                    id: _this.ThisID,
                    group: _this.movegname,
                    city: _this.$refs.mesage.getContent().join(","),
                    county: _this.$refs.mesage2.getContent().join(","),
                    final_time: _this.overtime,
                    content: _this.answer
                },
                function(re) {
                    _this.Dialoloading = false;
                    _this.$message(re.msg);
                    if (re.status == 1) {
                        _this.dialogVisibleMove = false;
                        _this.detailInfo();
                    } else {
                    }
                }
            );
        },
        dialogCheck() {
            this.Dialoloading = true;
            //核准操作接口
            if (this.moveTitle == "核准") {
                this.checkFnUrl();
            } else if (this.moveTitle == "再次核准") {
                this.reCheckFnUrl();
            }
        },
        //再次核准操作
        reCheckFn() {
       
            //办结弹窗
            this.$confirm("本诉求已进行核准，是否再次核准")
            .then(_ => {
                this.dialogVisibleMove = true;
                this.moveTitle = "再次核准";
                this.GetTargetList();
                this.GetMovedetailInfo();
                this.dialogCon = "受理意见";

                this.isHide = true;
                done();
            })
            .catch(_ => {});
 
            
        },
        //再次核准接口
        reCheckFnUrl() {
            if (
                this.$refs.mesage.getContent().length == 0 &&
                this.$refs.mesage2.getContent().length == 0
            ) {
                this.$message.error("请选择县长热线或者请选择市级部门");
                return;
            }
            var _this = this;
            actionurl.reTransfer(
                {
                    //核准接口
                    id: _this.ThisID,
                    group: _this.movegname,
                    city: _this.$refs.mesage.getContent().join(","),
                    county: _this.$refs.mesage2.getContent().join(","),
                    final_time: _this.overtime,
                    content: _this.answer
                },
                function(re) {
                    _this.Dialoloading = false;
                    if (re.status == 1) {
                        _this.$message(re.msg);
                        _this.dialogVisibleMove = false;
                        _this.detailInfo();
                    } else {
                        _this.$message(re.msg);
                    }
                }
            );
        },
        goBackTo() {
            //退回事件
            this.dialogVisible = true;
            this.uploadFile = false;
            this.dialogTit = "退回";
            this.dialogCon = "退回意见";
        },
        goBackFnUrl() {
            //退回事件接口
            var _this = this;
            actionurl.goBackToYY(
                {
                    id: _this.ThisID,
                    back_msg: _this.answer
                },
                function(re) {
                    _this.Dialoloading = false;
                    _this.$message(re.msg);
                    _this.dialogVisible = false;
                    if ((re.status = 1)) {
                        _this.detailInfo();
                    }
                }
            );
        },
        Conclude() {
            //办结弹窗
            this.$confirm("点击【办结】会强制办结本诉求")
                .then(_ => {
                    console.log(123);
                    // this.tieUp = false;
                    this.dialogVisible = true;
                    this.uploadFile = true;
                    this.dialogTit = "强制办结";
                    this.dialogCon = "办结内容";
                    this.answer = "";
                    done();
                })
                .catch(_ => {});
        },
        ConcludeFnUrl() {
            //结接口
            var _this = this;
            actionurl.forceConclude(
                {
                    id: _this.ThisID,
                    sup_attach: JSON.stringify(_this.fileList3),
                    content: _this.answer
                },
                function(re) {
                    _this.Dialoloading = false;
                    if ((re.status = 1)) {
                        _this.$message(re.msg);
                        _this.dialogVisible = false;
                        _this.detailInfo();
                    } else {
                        _this.$message(re.msg);
                        _this.dialogVisible = false;
                    }
                }
            );
        },
        dubanFn() {
            //督办弹窗
            this.dialogVisible = true;
            this.uploadFile = true;
            this.dialogTit = "督办";
            this.dialogCon = "督办内容";
            this.answer = "";
        },
        SuperviseSubmit() {
            //督办接口
            var _this = this;
            actionurl.Qsupervise(
                {
                    id: _this.ThisID,
                    sup_attach: JSON.stringify(_this.fileList3),
                    content: _this.answer
                },
                function(re) {
                    _this.Dialoloading = false;
                    if ((re.status = 1)) {
                        _this.$message(re.msg);
                        _this.dialogVisible = false;
                        _this.detailInfo();
                    } else {
                        _this.$message(re.msg);
                        _this.dialogVisible = false;
                    }
                }
            );
        },

        fileSuccess(event, file, fileList) {
            var obj = {};
            obj.name = file.name;
            obj.url = file.response.data.path;
            this.fileList3.push(obj);
        },
        doneFn() {
            this.dialogVisible = true;
            this.dialogTit = "运营人员受理";
            this.dialogCon = "受理内容";
            this.placeholder = "可输入受理方案及处理时限";
            this.uploadFile = true;
            // this.print = true;
        },
        yyShouliFnUrl() {
            //运营人员受理接口
            var _this = this;
            actionurl.yyAccept(
                {
                    id: _this.ThisID,
                    content: _this.answer,
                    sup_attach: JSON.stringify(_this.fileList3)
                },
                function(re) {
                    _this.Dialoloading = false;
                    _this.dialogVisible = false;
                    if (re.status == 1) {
                        _this.detailInfo();
                        _this.$message({
                            message: "受理成功",
                            type: "success"
                        });
                        _this.fileList3 = [];
                    } else {
                        _this.$message({
                            message: re.msg,
                            type: "warning"
                        });
                    }
                }
            );
        },
        handlemove(file, fileList) {
            // this.fileList3 = fileList;

            this.loading = true;
            var data = this.fileList3.filter(function(item) {
                return item.uid == file.uid;
            });
            this.fileList3.del(function(obj) {
                return obj.uid == data;
            });
            var _this = this;
            _this.fileRemove(file, _this.fileList3);
        },
        fileRemove(file, fileList) {
            var _this = this;
            actionurl.delfile(
                {
                    file: file.url
                },
                function(re) {
                    if ((re.status = 1)) {
                        _this.$message(re.msg);
                    } else {
                        _this.$message(re.msg);
                    }
                }
            );
        },
        ShouLiOptionFn() {
            //主内容解答接口
            var _this = this;
            actionurl.ShouLiOption(
                {
                    id: _this.ThisID,
                    content: _this.answer,
                    sup_attach: JSON.stringify(_this.fileList3)
                },
                function(re) {
                    _this.Dialoloading = false;
                    if (re.status == 1) {
                        _this.dialogVisible = false;
                        _this.detailInfo();
                        _this.$message(re.msg);
                        _this.fileList3 = [];
                    } else {
                        _this.$message({
                            message: re.msg,
                            type: "warning"
                        });
                    }
                }
            );
        },
        detailInfo() {
            //获取详情
            var _this = this;
            actionurl.MessageDetail(
                {
                    question_num: _this.$route.params.id
                },
                function(re) {
                    _this.loading = false;
                    if (re.status == 1) {
                        _this.title = re.data.message.title;
                        _this.company = re.data.message.company;
                        _this.user = re.data.message.user;
                        _this.phone = re.data.message.phone;
                        _this.tel = re.data.message.tel;
                        _this.accepttime = re.data.message.accepttime;
                        _this.addtime = re.data.message.addtime;
                        _this.target = re.data.message.target;
                        _this.content = re.data.message.content;
                        _this.supplement = re.data.message.supplement;
                        _this.qtitle = re.data.message.gname;
                        _this.progress = re.data.progress;
                        _this.address = re.data.message.address;
                        _this.proofread = re.proofread;
                        _this.porcessStatus = re.data.message.status;
                        _this.endTime = re.data.message.TimeAccept;
                        _this.final_time = re.data.message.final_time;
                        _this.target_num = re.data.message.target_num;
                        _this.from = re.data.message.from;
                        _this.area = re.data.message.area;
                        _this.villages = re.data.message.villages;
                        _this.topProcess = re.data.message.progress;
                        _this.countTime();
                        _this.getAreaList();
                        // console.log(JSON.parse(re.data.message.attach));
                        if (re.data.message.attach !== "") {
                            _this.fileList = JSON.parse(re.data.message.attach);
                        } else {
                            _this.fileList = [];
                        }
                        _this.ThisID = re.data.message.id;
                        _this.questionNum=re.data.message.question_num
                    } else {
                        _this.$message(re.msg);
                    }
                }
            );
        },
        detailOldInfo() {
            //获取旧数据详情
            var _this = this;
            actionurl.getOriginalInfo(
                {
                    question_num: _this.$route.params.id
                },
                function(re) {
                    _this.loading = false;
                    console.log(re.status == 1);
                    if (re.status == 1) {
                        // _this.title = re.data[0].title;
                        _this.company = re.data[0].company;
                        _this.user = re.data[0].user;
                        _this.phone = re.data[0].phone;
                        _this.tel = re.data[0].tel;
                        _this.accepttime = re.data[0].accepttime;
                        _this.addtime = re.data[0].addtime;
                        _this.target = re.data[0].target;
                        _this.content = re.data[0].content;
                        // _this.supplement = re.data.message.supplement;
                        _this.qtitle = re.data[0].title;
                        // _this.progress = re.data.progress;
                        _this.address = re.data[0].address;
                        // _this.proofread = re.proofread;
                        // _this.porcessStatus = re.data.message.status;
                        // _this.endTime = re.data.message.TimeAccept;
                        // _this.final_time = re.data.message.final_time;
                        // _this.target_num = re.data.message.target_num;
                        // _this.from = re.data.message.from;
                        // _this.area = re.data.message.area;
                        // _this.villages = re.data.message.villages;
                        // _this.topProcess = re.data.message.progress;
                        _this.countTime();
                        _this.getAreaList();
                        
                        _this.ThisID = re.data[0].id;
                        _this.questionNum=re.data[0].question_num
                    } else {
                        _this.$message(re.msg);
                    }
                }
            );
        },
        qAnswer(id) {
            //流程轴解答
            this.anID = id;
            this.dialogVisible = true;
            this.dialogTit = "追问解答";
        },
        answerDo() {
            //流程轴解答接口
            var _this = this;
            actionurl.questionAnswer(
                {
                    flow_id: _this.anID,
                    answer: _this.answer
                },
                function(re) {
                    if (re.status == 1) {
                        _this.dialogVisible = false;
                        _this.detailInfo();
                        _this.fileList3 = [];
                    } else {
                        _this.$message(re.msg);
                    }
                }
            );
        },
        dialogDone() {
            this.Dialoloading = true;
            if (this.dialogTit == "解答") {
                this.ShouLiOptionFn();
            } else if (this.dialogTit == "督办") {
                this.SuperviseSubmit();
            } else if (this.dialogTit == "申诉") {
                this.shensuFnUrl();
            } else if (this.dialogTit == "企业诉求已开始受理") {
                this.shouliFnUrl();
            } else if (this.dialogTit == "运营人员受理") {
                this.yyShouliFnUrl();
            } else if (this.dialogTit == "办结") {
                this.concludeUrlFn();
                // this.$message();
            } else if (this.dialogTit == "退回") {
                this.goBackFnUrl();
            } else if (this.dialogTit == "强制办结") {
                this.ConcludeFnUrl();
            } else if (this.dialogTit == "评价") {
                this.pjFnUrl();
            } else {
                this.answerDo();
            }
        },
        doneOver() {
            this.dialogVisible = true;
            this.tieUp = true;
            this.uploadFile = true;
            this.dialogTit = "办结";
            this.dialogCon = "办结方案";
            this.answer = "";
        },
        getUserinfo() {
            //获取用户信息
            var _this = this;
            actionurl.getUserInfo({}, function(re) {
                _this.uType = re.userType;

                // _this.MessageList();
            });
        }
    },
    watch:{
        //    intoType(newValue,oldValue){
        //        console.log(newValue,oldValue);
        //    } 
        $route(to) {
            this.intoType = to.params.type;
            
            if(to.params.type == 4){
                this.detailOldInfo();
                this.newShow = false;
            }else{
                this.detailInfo();
                this.newShow = true;
            }
        }
    },
    created() {
        // this.detailInfo();
        this.getUserinfo();
        this.httpHome = config.URLWEBHTTP;
        this.question_num = this.$route.params.id;
        this.intoType = this.$route.params.type;
        if(this.$route.params.type == 4){
                this.detailOldInfo();
                this.newShow = false;
            }else{
                this.detailInfo();
                this.newShow = true;
            }
        // $('.orientation ul li.green').last().removeClass('green').addClass('warn');
    }
};
</script>

<style lang="scss" scoped>
.context {
    padding: 0 30px 20px;

    h3 {
        // margin-bottom: 13px;
        font-size: 20px;
        font-weight: normal;
    }

    p {
        font-size: 14px;
        line-height: 24px;
    }

    .tips {
        color: #999;
        font-size: 14px;
        display: inline-block;
        padding-bottom: 30px;
    }
}

.marbtn {
    margin-top: 15px;
}

.title {
    // justify-content: flex-start;
}

.step {
    min-eight: 580px;
    padding-left: 30px;
}

.el-step__description {
    border: 1px solid #e8e7e7;
    display: inline-block;
    border-radius: 10px;
    padding: 15px;
    width: 440px;
    color: #999;

    h4 {
        font-size: 14px;
        color: #666;
        height: 22px;
        font-weight: normal;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        margin-bottom: 15px;
        overflow: hidden;
        position: relative;

        em {
            display: flex;
            align-items: center;
        }

        span {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}

.el-step__title.is-process {
    color: #333;
    font-weight: normal;
}

.el-step__icon {
    // background: #999;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 0;
}

.el-step.is-vertical .el-step__line {
    left: 7px;
}

.el-step__icon.is-text {
    border: none;
    background: #999;
}

.el-step:last-of-type .el-step__icon.is-text {
    background: #999;
}

.el-step:first-of-type .el-step__icon.is-text {
    background: green;
}

.el-step:last-of-type .el-step__description,
.el-step:last-of-type .el-step__main {
    padding-right: 15px;
}

.el-step__description {
    margin: 10px 0;
}

// .el-steps {
//   display: initial;
// }

.el-step.is-vertical .el-step__title {
    line-height: 18px;
    // padding-bottom:
}

ul {
    // padding-top: 20px;
    li {
        a {
            color: #333;
            font-size: 12px;
            line-height: 26px;
        }
    }
}

.table table {
    width: 100%;

    ul {
        margin-top: 0;
        padding-top: 0;
        line-height: 22px;
    }

    td {
        border: 1px solid #ebeef5;
        line-height: 40px;
        padding: 0 10px;
        font-size: 14px;
    }
}

.conp {
    padding: 15px 0;

    p {
        line-height: 26px;
    }
}

.orientation {
    ul {
        width: 100%;
        display: flex;

        .iconfont {
            color: #999;
            margin-right: 0;
            font-size: 14px;
            line-height: 45px;
        }

        li {
            // border: 1px solid #dddddd;
            // background: #f5f5f5;
            width: 95px;
            height: 45px;
            box-sizing: border-box;
            font-size: 14px;

            &:nth-last-child(1) {
                // margin-left: 20px;
                &:after {
                    display: none;
                }

                &:before {
                    display: none;
                }
            }

            // &:nth-last-child(2) {
            //   &:after {
            //     display: none;
            //   }
            //   &:before {
            //     display: none;
            //   }
            // }
            &.red {
                i {
                    color: #ff0000;
                    border-color: #ff0000;
                    background: #ff0000;
                }

                p {
                    color: #ff0000;
                }
            }

            &.warn {
                i {
                    color: #fff;
                    border-color: #ffab51;
                    background: #ffab51;
                }

                p {
                    color: #ffab51;
                }
            }

            &.green {
                i {
                    color: #fff;
                    border-color: #6bd73c;
                    background: #6bd73c;
                }

                p {
                    color: #6bd73c;
                }
            }

            p {
                // position: absolute;
                // width: 100%;
                // height: 100%;
                // left: 0;
                // top: 0;
                line-height: 45px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            color: #999999;
            position: relative;

            &:nth-child(1) {
                z-index: 99;
            }

            &:nth-child(2) {
                z-index: 88;
            }

            &:nth-child(3) {
                z-index: 77;
            }

            // &:nth-child(4){
            //   z-index: 66;
            // }
            // &:nth-child(5){
            //   z-index: 55;
            // }
            // &:before {
            //   content: "";
            //   position: absolute;
            //   left: 2px;
            //   top: 0;
            //   width: 100%;
            //   height: 100%;
            //   background: #f5f5f5;
            // }
            // &:after {
            //   right: -18px;
            //   top: 22px;
            //   content: "";
            //   width: 30px;
            //   height: 29px;

            //   position: absolute;

            //   border-left: 2px solid #ddd;

            //   border-bottom: 2px solid #ddd;

            //   -webkit-transform: translate(0, -50%) rotate(-135deg);

            //   transform: translate(0, -50%) rotate(-135deg);
            //   background: #f5f5f5;
            // }

            i {
                display: inline-block;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                border: 1px solid #999999;
                text-align: center;
                line-height: 18px;
                margin-right: 5px;
                color: #999999;
                font-size: 14px;
            }
        }
    }

    padding: 0 30px;
}

.table table tr td {
    border: 1px solid #dddddd;

    &:nth-child(odd) {
        background: #f5f5f5;
    }
}

#out {
    font-size: 12px;
    width: 100px;
    height: 40px;
    color: white;
    padding: 9px 30px;
    background: #0080cd;
    text-align: center;
    border-radius: 2px;
    margin-left: 10px;
}

#out:hover {
    background: #1f365e;
    color: #fff;
    border-radius: 2px;
}
</style>
